import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './forgetPassword.module.css';
import logo1 from './avatars/logo1.png'
import logo2 from './avatars/logo2.png'
import wechat from './avatars/wechat.png'
export default function ForgetPassword() {
  const [email, setEmail] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里添加发送重置密码邮件的逻辑
    console.log('发送重置密码邮件到：', email);
    // 跳转到邮件确认页面
    navigate('/emailverification');
  };

  return (
    <div className={styles.container}>
      <div className={styles.leftSection}>
        <div className={styles.logo}>
          <img src={logo1} alt="Koto" />
          <h1>Koto</h1>
        </div>
        <h2>以最佳的方式管理您的文件存储</h2>
        <p>太棒了，我们为您创建了存储所有文档的完美场所。</p>
        <div className={styles.illustration}>
          <img src={logo2} alt="文件夹插图" />
        </div>
      </div>

      <div className={styles.rightSection}>
        <div className={styles.forgetForm}>
          <h2>忘记密码了吗？</h2>
          <p className={styles.description}>
            输入您的电子邮件地址，我们将向您发送重置密码的说明。
          </p>

          <form onSubmit={handleSubmit}>
            <div className={styles.inputGroup}>
              <label>电子邮件</label>
              <input
                type="email"
                placeholder="输入您的电子邮件"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>

            <button type="submit" className={styles.submitButton}>
              重置密码
            </button>
          </form>

          <div className={styles.divider}>
            <span>或</span>
          </div>

          <div className={styles.socialLogin}>
            <button className={styles.wechatButton}>
              <img src={wechat} alt="微信" />
            </button>
          </div>

          <div className={styles.backToLogin}>
            <span>还没有账户？</span>
            <a href="/register">立即注册</a>
          </div>
        </div>
      </div>
    </div>
  );
}
